<template>
  <el-timeline v-loading="loading">
    <el-timeline-item
      timestamp="日"
      placement="top"
      color="#55DBCB"
      style="background-color: #55DBCB10"
    >
      <div class="grid grid-cols-5 items-center gap-4 m-2">
        <el-card
          v-for="(item, index) in day_data"
          :key="item.category_name + index"
          :class="[getStatus(item.change_rate)]"
        >
          <p class=" leading-8">
            <i class="el-icon-hot-water"></i>
            <span class="font-bold">{{ item.category_name }}</span>
          </p>
          <p class=" leading-8">
            <i class="el-icon-coin"></i>
            今天
            <span class="font-bold">{{ item.this_serial | formatNumber }}</span>
          </p>
          <p class=" leading-8">
            <i class="el-icon-coin"></i>
            昨天
            <span class="font-bold">{{ item.last_serial | formatNumber }}</span>
          </p>

          <p class=" leading-8">
            <i class="el-icon-collection-tag"></i>
            较昨日
            <span class="font-bold tip">{{ item.change_rate || "---" }}</span>
          </p>
        </el-card>
      </div>
    </el-timeline-item>

    <el-timeline-item
      timestamp="周"
      placement="top"
      color="#C96993"
      style="background-color: #C9699310"
    >
      <div class="grid grid-cols-5 items-center gap-4 m-2">
        <el-card
          v-for="(item, index) in week_data"
          :key="item.category_name + index"
          :class="[getStatus(item.change_rate)]"
        >
          <p class="font-bold  leading-8">
            <i class="el-icon-hot-water"></i>
            {{ item.category_name }}
          </p>
          <p class=" leading-8">
            <i class="el-icon-coin"></i>
            本周
            <span class="font-bold">{{ item.this_serial | formatNumber }}</span>
          </p>
          <p class=" leading-8">
            <i class="el-icon-coin"></i>
            上周
            <span class="font-bold">{{ item.last_serial | formatNumber }}</span>
          </p>

          <p class=" leading-8">
            <i class="el-icon-collection-tag"></i>
            较上周
            <span class="font-bold  tip">{{ item.change_rate || "---" }}</span>
          </p>
        </el-card>
      </div>
    </el-timeline-item>

    <el-timeline-item
      timestamp="月"
      placement="top"
      color="#453823"
      style="background-color: #45382310"
    >
      <div class="grid grid-cols-5 items-center gap-4 m-2">
        <el-card
          v-for="(item, index) in month_data"
          :key="item.category_name + index"
          :class="[getStatus(item.change_rate)]"
        >
          <p class="font-bold  leading-8">
            <i class="el-icon-hot-water"></i>
            {{ item.category_name }}
          </p>
          <p class=" leading-8">
            <i class="el-icon-coin"></i>
            本月
            <span class="font-bold">{{ item.this_serial | formatNumber }}</span>
          </p>
          <p class=" leading-8">
            <i class="el-icon-coin"></i>
            上月
            <span class="font-bold">{{ item.last_serial | formatNumber }}</span>
          </p>

          <p class=" leading-8">
            <i class="el-icon-collection-tag"></i>
            较上月
            <span class="font-bold tip">{{ item.change_rate || "---" }}</span>
          </p>
        </el-card>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import { statisticsMallSerialTotal } from "@/api/dataPanel/financial";
import { NOOP } from "@/utils";

export default {
  filters: {
    formatNumber(value) {
      let tempValue = parseInt(value);
      return tempValue.toLocaleString();
    }
  },
  data() {
    return {
      loading: true,

      day_data: {},
      month_data: {},
      week_data: {}
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      statisticsMallSerialTotal()
        .then(res => {
          const {
            data: { day_data, month_data, week_data }
          } = res;
          this.day_data = day_data;
          this.month_data = month_data;
          this.week_data = week_data;
        })
        .catch(NOOP)
        .finally(() => (this.loading = false));
    },
    getStatus(statusString) {
      if (statusString.includes("增")) {
        return "bg-status-green";
      } else if (statusString.includes("降")) {
        return "bg-status-red";
      }
      return "";
    },
    getIconStatus(statusString) {
      return statusString.includes("增");
    }
  }
};
</script>

<style lang="scss" scoped>
.bg-status-green {
  background-color: rgba(145, 212, 69, 0.3);
  color: #5e5e5e;
  position: relative;

  .tip {
    color: #16c116;
  }
}

.bg-status-red {
  background-color: rgba(212, 100, 69, 0.3);
  color: #5e5e5e;
  position: relative;

  .tip {
    color: #ce3207;
  }
}
</style>
